<template>
  <!-- <el-dialog
    title="忘记密码"
    :visible.sync="centerDialogVisibleSecond"
    width="30%"
    :before-close="handleClose"
  >
    <el-form
      label-width="120px"
      ref="forgetpwdform"
      :model="forgetpwdform"
      :rules="rules"
    >
      <el-row :gutter="20">
        <el-col :span="14">
          <el-form-item prop="phone" label="手机号：">
            <el-input v-model="forgetpwdform.phone" maxlength="11"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-button @click="sendcodeMsg" :disabled="disabled">{{
            sendcode
          }}</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item prop="code" label="验证码：">
            <el-input v-model="forgetpwdform.code"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item prop="newpassword" label="新密码">
        <el-input
          type="password"
          v-model="forgetpwdform.newpassword"
        ></el-input>
      </el-form-item>
      <el-form-item prop="repeatpassword" label="确认密码">
        <el-input
          type="password"
          v-model="forgetpwdform.repeatpassword"
        ></el-input>
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button type="default" @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </template>
  </el-dialog> -->
  <v-stepper v-model="e1">
    <v-stepper-header>
      <v-stepper-step :complete="e1 > 1" step="1">身份验证</v-stepper-step>
      <v-divider></v-divider>
      <v-stepper-step :complete="e1 > 2" step="2">密码重置</v-stepper-step>
      <v-divider></v-divider>
      <v-stepper-step step="3">重置完成</v-stepper-step>
    </v-stepper-header>

    <v-stepper-items>
      <v-stepper-content step="1">
        <!-- 步骤一的内容-->
      </v-stepper-content>

      <v-stepper-content step="2">
        <!-- 步骤二的内容-->
      </v-stepper-content>

      <v-stepper-content step="3">
        <!-- 步骤三的内容-->
      </v-stepper-content>
    </v-stepper-items>
  </v-stepper>
</template>
 
<script>
import qs from "qs";

export default {
  name: "forgetpwd",
  props: ["centerDialogVisibleSecond"],
  data() {
    return {
      getCode: "",
      sendcode: "发送验证码",
      disabled: false,
      forgetpwdform: {
        phone: "",
        code: "",
        newpassword: "",
        repeatpassword: "",
      },
      rules: {
        phone: [{ required: true, message: "手机号不能为空", trigger: "blur" }],
        code: [
          {
            required: true,
            message: "验证码不能为空",
            trigger: "blur",
          },
        ],
        newpassword: [
          {
            required: true,
            message: "新密码不能为空",
            trigger: "blur",
          },
        ],
        repeatpassword: [
          {
            required: true,
            message: "重置密码不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    //手机号正则判断
    judgePhone() {
      const reg =
        /^((13[0-9])|(14[5,7,9])|(15[^4])|(18[0-9])|(17[0,1,3,5,6,7,8]))\d{8}$/;
      //var url="/nptOfficialWebsite/apply/sendSms?mobile="+this.ruleForm.phone;
      if (this.forgetpwdform.phone == "") {
        this.$message("请输入手机号码");
        return false;
      } else if (!reg.test(this.forgetpwdform.phone)) {
        this.$message("手机号格式不正确");
        return false;
      } else {
        return true;
      }
    },
    //发送验证码
    sendcodeMsg() {
      let _this = this;
      if (_this.judgePhone()) {
        var num = 60;
        var timer = setInterval(function () {
          num--;
          _this.disabled = true;
          _this.sendcode = num + "秒后重新获取";
          if (num === 0) {
            _this.sendcode = "获取验证码";
            _this.disabled = false;
            clearInterval(timer);
          }
        }, 1000);
        _this.$http
          .post(
            "你的接口",
            qs.stringify({ phoneNumber: _this.forgetpwdform.phone })
          )
          .then((res) => {
            _this.getCode = res;
          });
      }
    },
    //关闭页面
    handleClose() {
      this.centerDialogVisibleSecond = false;
      this.$emit("tyonke", this.centerDialogVisibleSecond);
    },

    //表单提交
    handleSubmit() {
      let _this = this;
      _this.$refs["forgetpwdform"].validate((valid) => {
        if (valid) {
          if (_this.forgetpwdform.code != _this.getCode) {
            this.$message({
              type: "error",
              message: "修改失败",
              duration: 1000,
            });
            return false;
          }
          return this.$message({
            type: "success",
            message: "修改成功",
            duration: 1000,
          });
        } else {
          return;
        }
      });
    },
  },
  watch: {
    centerDialogVisibleSecond(newValue, oldValue) {
      this.centerDialogVisibleSecond = newValue;
    },
  },
};
</script>
 
<style scoped>
</style>